<template>
  <div class="person">
    <a-form-model layout="inline">
      <a-form-model-item>
        <!-- <a-button icon="plus" size="large" @click="addPerson">
          新增
        </a-button> -->
      </a-form-model-item>
      <a-form-model-item>
        <a-range-picker
          style="width: 380px"
          v-model="time"
          size="large"
          :show-time="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :placeholder="['开始时间', '结束时间']"
        />
      </a-form-model-item>
      <a-form-model-item>
        <a-select @select="selectLeave" style="width: 120px" size="large" placeholder="所有记录" @focus="getFactoryData">
          <a-select-option :value="1">
            出厂
          </a-select-option>
          <a-select-option :value="0">
            入厂
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-select @select="selectFactory" style="width: 240px" size="large" placeholder="全部厂区">
          <a-select-option v-for="(item,index) in factorys" :key="index" :value="item.value">
            {{item.name}}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-input-search
          v-model="searchInput"
          placeholder="输入电话号码"
          enter-button="搜索"
          size="large"
          @search="search"
        />
      </a-form-model-item>
    </a-form-model>

    <a-table class="tabel" :columns="columns" :data-source="source" bordered rowKey="id" :pagination="false">
      <!-- <template slot="action" slot-scope="text,record">
        <div class="u-flex u-row-around">
          <a @click="clickEdit(record)">编辑</a>
          <a @click="clickDel(record)">删除</a>
        </div>
      </template> -->
    </a-table>

    <a-pagination
      class="pagination"
      v-model="page.pageNum"
      :pageSize.sync="page.pageSize"
      :pageSizeOptions="['5','10','15','20']"
      show-size-changer
      :default-current="1"
      :total="total"
      @change="getRecordData"
      @showSizeChange="getRecordData"
    />

    <RecordFormModal :visible.sync="showForm" :formData.sync="recordForm"></RecordFormModal>
  </div>
</template>

<script>
import RecordFormModal from '../../components/home/RecordFormModal'
import {getRecords,getFactorysByName} from "../../api/index";
import moment from 'moment'

export default {
  name:"Record",
  data(){
    return {
      showForm:false,
      recordForm:null,
      searchInput:"",
      factorys:[],
      factoryId:null,
      columns:[
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '电话',
          dataIndex: 'phone',
          key: 'phone',
        },
        {
          title: '事由',
          dataIndex: 'reason',
          key: 'reason',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
        },
        {
          title: '工厂名称',
          dataIndex: 'factoryName',
          key: 'factoryName',
        },
        {
          title: '工作地址',
          dataIndex: 'workSite',
          key: 'workSite',
        },
        {
          title: '身份证',
          dataIndex: 'idCardNumber',
          key: 'idCardNumber',
        },
        {
          title: '体温',
          dataIndex: 'animalHeat',
          key: 'animalHeat',
        },
        {
          title: '入厂时间',
          dataIndex: 'enterTime',
          key: 'enterTime',
        },
        {
          title: '出厂时间',
          dataIndex: 'leaveTime',
          key: 'leaveTime',
        },
        // {
        //   title: '操作',
        //   dataIndex: 'action',
        //   key: 'action',
        //   scopedSlots: { customRender: 'action' },
        // },
      ],
      source:[],
      time:["2020-01-02 00:00:00","2021-04-07 00:00:00"],
      leave:"",
      page:{
        pageNum:1,
        pageSize:5
      },
      total:0,

    }
  },
  components:{
    RecordFormModal
  },
  created(){
    this.time[0]=moment().subtract(1, 'days').format("YYYY-MM-DD HH:mm:ss");
    this.time[1]=moment().format("YYYY-MM-DD HH:mm:ss");
    this.getFactoryData();
    this.getRecordData();
  },
  methods:{
    getFactoryData(){
      getFactorysByName().then(data =>{
        this.factorys=[]
        data.map(item =>{
          this.factorys.push({
            name:item.name,
            value:item.id
          })
        })
      })
    },
    getRecordData(){
      getRecords({
        startTime:this.time[0],
        endTime:this.time[1], 
        phone:this.searchInput,
        leave_:this.leave===""?undefined:this.leave?true:false,
        factoryId:this.factoryId==null?undefined:this.factoryId,
        ...this.page
      }).then(data =>{
        data.records.map(item =>{
          item.enterTime=item.enterTime?moment(item.enterTime).format("YYYY-MM-DD HH:mm:ss"):"";
          item.leaveTime=item.leaveTime?moment(item.leaveTime).format("YYYY-MM-DD HH:mm:ss"):"";
        });
        this.source=data.records;
        this.total=data.total;
      });
    },
    addPerson(){
      this.showForm=true;
      this.recordForm=null;
    },
    search(){
      this.page.pageNum=1;
      this.getRecordData();
    },
    clickEdit(record){
      delete record.name;
      delete record.createTime;
      this.recordForm=this._.cloneDeep(record);
      this.showForm=true;
    },
    clickDel(record){
      //delPerson(record.id);
      this.getRecordData();
    },
    selectFactory(val){
      this.factoryId=val;
    },
    selectLeave(val){
      this.leave=val;
    }
  }
}
</script>
<style lang="scss" scoped>
.person{
  height: 100%;
  .tabel{
    height: calc(100% - 100px);
    margin: 10px;
    overflow-y: scroll;
  }
  .pagination{
    height: 60px;
  }
}
</style>
